<template>
	<swiper class="swiper" circular :indicator-dots="props.swiperBanner.length > 1 || props.video"
		indicator-color="#dcdcdc" :autoplay="true" indicator-active-color="#D83E35">
		<swiper-item v-if="props.video">
			<video class="video" :src="props.video"></video>
		</swiper-item>
		<swiper-item v-for="item,index in props.swiperBanner" :key="index">
			<image class="img" :src="item"></image>
		</swiper-item>
	</swiper>
</template>

<script setup lang="ts">
	const props = withDefaults(defineProps<{
		swiperBanner : Array<string>,
		video : string,
	}>(), {
		swiperBanner: () => [],
		video: '',
	});
</script>

<style lang="scss" scoped>
	.swiper {
		width: 100%;
		height: 750rpx;

		.video {
			width: 100%;
			height: 750rpx;
		}

		.img {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
</style>